@charset "utf-8";
@import "reset";
@function r($px){
    @return $px/100*1rem;
}
body{
    font-size: 16px;
    background-color: #222222;
    .top{
        height: r(32);
        background-color: #1e1d1d;
    }
    .mid{
        padding: r(162) r(77) 0 r(73);
        .logo{
            margin: 0 auto;
            width: r(163);
        }
        .user{
            width: r(492);
            height: r(54);
            margin-top: r(43);
            margin-bottom: r(15);
            position: relative;
            background-color: #303030;
            i{
                position: absolute;
                color: white;
                left: r(15);
                top: 0;
                line-height: r(54);
                font-size: r(30);
            }
            input{
                position: absolute;
                width: r(430);
                height: r(54);
                border: none;
                outline: none;
                color: white;
                left: r(62);
                top: 0;
                font-size: r(20);
                background-color: #3d3d3d;
                padding-left: r(41);
            }
        }
        .forget{
            margin-top: r(10);
            margin-bottom: r(48);
            color: white;
            font-size: r(19);
            i{
                font-size: r(20);
            }
        }
        .btn{
            margin-top: r(48);
            input{
                font-size: r(23);
                width: r(492);
                height: r(54);
                color: white;
                letter-spacing: r(11);
                background-color: #b60005;
            &:last-child{
                margin-top: r(14);
                background-color: #303030;
                border: 1px solid #771619;
            } 
            &:hover{
                background-color: #b60005;
            } 
            }
        }
    }
}